<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="1.5">
          <el-button
              type="primary"
              size="mini"
              @click="add()"
            >新增</el-button>
        </el-col>
      </el-row>
    </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="学号" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.userId }}
          </template>
        </el-table-column>
        <el-table-column label="学生姓名">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column label="密码" width="200" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.password }}</span>
          </template>
        </el-table-column>

        <el-table-column label="roleId" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.roleId }}
          </template>
        </el-table-column>

        <el-table-column label="学系" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.deptId }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.userId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    

    
      <el-dialog 
            center
            title= "添加学生"
            :visible.sync= "addDialogVisible"
            width= "30%"
      >
        <el-form :model="addUserModel" ref= "addUserForm" label-width= "90px">
           <el-form-item label= "学号" prop = "userId">
              <el-input v-model="addUserModel.userId"></el-input>
          </el-form-item>
          <el-form-item label="学生姓名" prop ="username">
              <el-input v-model="addUserModel.username"></el-input>
          </el-form-item>
          
          <el-input v-model="addUserModel.roleId" type ="hidden"></el-input>

          <el-form-item label="学系" prop ="deptId">
              <el-input v-model="addUserModel.deptId"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button @click="handleAdd" type="primary">确 定</el-button>
        </span>

      </el-dialog>
            <el-dialog 
            center
            title= "编辑学生"
            :visible.sync= "updateDialogVisible"
            width= "30%" 
      >
        <el-form :model="addUserModel" ref="updateUserForm" label-width="90px">
           <el-form-item label="学号" prop ="userId">
              <el-input v-model="addUserModel.userId"></el-input>
          </el-form-item>
          <el-form-item label="学生姓名" prop ="username">
              <el-input v-model="addUserModel.username"></el-input>
          </el-form-item>
          <el-form-item label="roleId" prop ="roleId">
              <el-input v-model="addUserModel.roleId"></el-input>
          </el-form-item>
          <el-form-item label="学系" prop ="deptId">
              <el-input v-model="addUserModel.deptId"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class= "dialog-footer">
            <el-button @click= "updateDialogVisible = false">取 消</el-button>
            <el-button @click= "handleEdit" type="primary">确 定</el-button>
        </span>
      </el-dialog>

    <el-pagination @size-change= "handleSizeChange" @current-change= "handleCurrentChange" :current-page= "PageSet.pageNum"
        :page-sizes="[5, 30, 50, 100]" :page-size="PageSet.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="PageSet.total">
    </el-pagination>



  </div>
</template>

<script>
import { getStudentList, addUser, updateUser, deleteUser} from '@/api/userManage/user'


export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      PageSet: {
        pageNum: 1, // 当前页码
        pageSize: 5, // 每页显示的行数
        total: 100
      },
      addDialogVisible: false,
      updateDialogVisible: false,
      addUserModel: {
        userId: '',
        username: '',
        roleId: '',
        deptId: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleSizeChange: function(size) {
      this.PageSet.pageSize = size
      this.fetchData()
    },
    handleCurrentChange: function(pageNum) {
      this.PageSet.pageNum = pageNum
      this.fetchData()
    },
    resetForm() {
      this.addUserModel = {
        userId: '',
        username: '',
        roleId: '',
        deptId: ''
      }
    },
    fetchData() {
      this.listLoading = true
      getStudentList(this.PageSet).then(response => {
        this.PageSet.total = response.data.items.total
        this.list = response.data.items.list
        this.listLoading = false
      })
    },
    edit(row) {
      this.updateDialogVisible = true
      this.addUserModel = Object.assign({}, row)
    },
    handleEdit() {
      this.$refs.updateUserForm.validate(valid => {
        if (valid) {
          updateUser(this.addUserModel).then(() => {
            this.updateDialogVisible = false
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.fetchData()
          })
        }
      })
    },
    handleDelete(id) {
      this.$confirm('此操作将永久删除该用户,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          deleteUser(id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchData()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        
    },
    add() {
      this.resetForm()
      this.addUserModel.roleId = 3
      this.addDialogVisible = true
    },
    handleAdd() {
      this.$refs.addUserForm.validate(valid => {
        if (valid) {
          addUser(this.addUserModel).then(() => {
            this.addDialogVisible = false
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.fetchData()
          })
        }
      })
    },

  }
}
</script>
